<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib
	prefix="sec" uri="http://www.springframework.org/security/tags"%>

<html>
<head>
<title>QnA</title>
<style>
body {
	font-family: Calibri;
}

table {
	border: 1px solid;
	border-collapse: collapse;
}

td {
	border: 1px solid;
}

th {
	text-align: left;
}
</style>
<link rel="stylesheet" type="text/css"
	href="../qna/commons/jquery-ui.css" />

<script type="text/javascript" src="../qna/commons/jquery.min.js"></script>
<script type="text/javascript" src="../qna/commons/jquery-ui.min.js"></script>

</head>
<body>
	<div align="right">
		Logged in as <a href="<c:url value="/" />"><sec:authentication
				property="principal.username" /></a>
	</div>
	<h2>QnA</h2>
	<form:form method="post" action="../answer.html"
		modelAttribute="userForm">
		<table>
			<tr>
				<th>Question here:</th>
				<td><form:label path="shortDesc">${userForm.shortDesc}</form:label></td>
			</tr>
			<tr>
				<th>Related Product here**</th>
				<td><form:label path="relatedProduct" id="relatedProduct">${userForm.relatedProduct}</form:label></td>
			</tr>
			<tr>
				<th>Related to Topic here**</th>
				<td><form:label path="relatedToTopic" id="relatedToTopic">${userForm.relatedToTopic}</form:label></td>
			</tr>

			<c:if test="${userForm.isTrueFalse}">
				<tr>
					<th>isTrueFalse</th>
					<td><form:select path="answer" id="answer">
							<form:option value="true">true</form:option>
							<form:option value="false">false</form:option>
						</form:select></td>
				</tr>
			</c:if>
			<c:if test="${userForm.isDropdown}">
				<tr>
					<th>isDropdown</th>
					<td>isDropdown</td>
				</tr>
				<c:if test="${userForm.numberOfOptions != 0}">

					<c:if test="${userForm.numberOfOptions >= 1}">
						<tr>
							<th>a)</th>
							<td>${userForm.optionOne}</td>
						</tr>
						<c:if test="${userForm.numberOfOptions >= 2}">
							<tr>
								<th>b)</th>
								<td>${userForm.optionSecond}</td>
								<c:if test="${userForm.numberOfOptions >= 3}">
									<tr>
										<th>c)</th>
										<td>${userForm.optionThird}</td>
									</tr>
									<c:if test="${userForm.numberOfOptions >= 4}">
										<tr>
											<th>d)</th>
											<td>${userForm.optionFourth}</td>
										</tr>
										<c:if test="${userForm.numberOfOptions >= 5}">
											<tr>
												<th>e)</th>
												<td>${userForm.optionFifth}</td>
											</tr>
											<c:if test="${userForm.numberOfOptions >= 6}">
												<tr>
													<th>f)</th>
													<td>${userForm.optionSixth}</td>
												</tr>
											</c:if>
										</c:if>
									</c:if>
								</c:if>
						</c:if>
					</c:if>
				</c:if>
				<tr>
					<th>Chosen option</th>
					<td><form:select path="answer" id="answer">
							<c:if test="${userForm.numberOfOptions >= 1}">
								<form:option value="a">a</form:option>
							</c:if>
							<c:if test="${userForm.numberOfOptions >= 2}">

								<form:option value="b">b</form:option>
							</c:if>
							<c:if test="${userForm.numberOfOptions >= 3}">

								<form:option value="c">c</form:option>
							</c:if>
							<c:if test="${userForm.numberOfOptions >= 4}">

								<form:option value="d">d</form:option>
							</c:if>
							<c:if test="${userForm.numberOfOptions >= 5}">

								<form:option value="e">e</form:option>
							</c:if>
							<c:if test="${userForm.numberOfOptions >= 6}">

								<form:option value="f">f</form:option>
							</c:if>
						</form:select></td>
				</tr>
			</c:if>
			<tr>
				<td colspan="2"><input type="submit" value="Submit Answer" />
					<input type="reset" value="Reset" /></td>
			</tr>
			<tr style="display: none;">
				<th>id</th>
				<td><form:input path="timestamp" id="timestamp"
						style="display: none;" /></td>
			</tr>
		</table>
		<br />

	</form:form>
	<div align="right">
		<a href="<c:url value="j_spring_security_logout" />"> Logout</a>
	</div>
	<script type="text/javascript">
		function split(val) {
			return val.split(/,\s*/);
		}
		function extractLast(term) {
			return split(term).pop();
		}

		$(document)
				.ready(
						function() {

							$("#relatedProduct")
									.autocomplete(
											{
												source : '${pageContext. request. contextPath}/get_related_product_list.html'
											});

							$("#relatedToTopic")
									.autocomplete(
											{
												source : function(request,
														response) {
													$
															.getJSON(
																	"${pageContext. request. contextPath}/get_related_to_topic_list.html",
																	{
																		term : extractLast(request.term)
																	}, response);
												},
												search : function() {
													// custom minLength
													var term = extractLast(this.value);
													if (term.length < 1) {
														return false;
													}
												},
												focus : function() {
													// prevent value inserted on focus
													return false;
												},
												select : function(event, ui) {
													var terms = split(this.value);
													// remove the current input
													terms.pop();
													// add the selected item
													terms.push(ui.item.value);
													// add placeholder to get the comma-and-space at the end
													terms.push("");
													this.value = terms
															.join(", ");
													return false;
												}
											});

						});
	</script>

</body>
</html>
